<template>
  <div class="new_content">
    <div class="new_left" ref="container" @scroll="handleScroll" v-loading="leftLoading"
      element-loading-background="#202b2c" element-loading-svg-view-box="-10, -10, 50, 50" :element-loading-spinner="svg">
      <div class="new_item" v-for="(item, index) in new_list" :key="index" @click="handleSelect(item.id)">
        <div class="img_title">
          <img alt="" v-lazy="url + item.image" />
        </div>
        <div class="item_bottom">
          <p class="name">
            {{ item.title }}
          </p>
          <span class="time">{{ item.publish_time }}</span>
        </div>
      </div>
    </div>
    <div class="new_right" v-loading="rightLoading" element-loading-background="#202b2c"
      element-loading-svg-view-box="-10, -10, 50, 50" :element-loading-spinner="svg">
      <div class="add_width">
        <div class="header_top">
          <img v-lazy="url + newItem.avatar" alt="" class="user_img" />
          <p class="name">{{ newItem.byline }}</p>
          <span class="time">{{ newItem.publish_time }}</span>
        </div>
        <div class="article_cover">
          <div class="title_img">
            <img v-lazy="url + newItem.image" alt="" />
          </div>
          <p class="article_text" v-html="newItem.content">
          </p>
          <div class="praise">
            <i class="iconfont icon-dianzan"></i>
          </div>
          <p class="text_desc">
            Disclaimer: The views expressed in this article represent the
            personal views of the author and do not constitute investment advice
            for this platform. This platform does not guarantee the accurancy,
            completeness and timelines of the information in the article, nor
            does it assume responsibility for any losses arising from the use
            of, or reliance on the information in the article.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import { newList } from "../../api/user.js";
import { url, convertToUSFormat, convertEnglishDateToChinese } from "../../utils/util.js";
import { throttle } from "lodash";
import bus from "../../utils/event-bus.js";
import { useRoute, useRouter } from 'vue-router'
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const leftLoading = ref(true)
const rightLoading = ref(true)

const route = useRoute()
const router = useRouter()
let routeFlag = false




const container = ref(null);
const selectIndex = ref(0);
const newItem = ref({});
const new_list = ref([]);
const page = ref(1);
const isScrolling = ref(false);
const listLenght = ref(0);
const lang = ref("");
const handleScroll = throttle(() => {
  const { scrollTop, scrollHeight, clientHeight } = container.value;
  // 滚动到底部（可调整阈值）
  if (listLenght.value == 10) {
    if (scrollTop + clientHeight >= scrollHeight - 20) {
      if (!isScrolling.value) {
        isScrolling.value = true;
        // 使用 requestAnimationFrame 优化性能
        requestAnimationFrame(() => {
          page.value++;
          getNewList();
          isScrolling.value = false;
        });
      }
    }
  }
}, 500);
const handleSelect = (id) => {
  getNewDetail(id);
};

onMounted(() => {

  if (route?.query?.id && routeFlag === false) {
    routeFlag = true
    getNewDetail(route.query.id)
  }
  router.replace({ path: route.path })
  // 获取当前语言
  lang.value = localStorage.getItem("lang");
  getNewList();
  bus.on("data-updated", (data) => {
    lang.value = data
    if (data == "en") {
      new_list.value.forEach((item) => {
        item.publish_time = convertToUSFormat(item.publish_time);
      });
      newItem.value.publish_time = convertToUSFormat(newItem.value.publish_time)
    } else {
      new_list.value.forEach((item) => {
        item.publish_time = convertEnglishDateToChinese(item.publish_time);
      });
      newItem.value.publish_time = convertEnglishDateToChinese(newItem.value.publish_time)
    }
  });






});
const getNewDetail = async (id) => {
  const res = await newList(null, id);
  if (res.code == 200) {
    rightLoading.value = false
    if (lang.value == 'en') {
      newItem.value = {
        ...res.data,
        publish_time: convertToUSFormat(res.data.publish_time)
      };
    } else {
      newItem.value = res.data
    }


  }
};
const getNewList = async () => {
  const res = await newList(page.value);
  if (res.code == 200) {
    leftLoading.value = false
    if (lang.value == "en") {
      res.data.data.forEach((item) => {
        item.publish_time = convertToUSFormat(item.publish_time);
      });
    }
    listLenght.value = res.data.data ? res.data.data.length : 0;
    if (page.value == 1) {
      new_list.value = res.data.data;
    } else {
      new_list.value = new_list.value.concat(res.data.data);
    }

    if (routeFlag === false) {
      getNewDetail(res.data.data[0].id);
    } else {
      routeFlag == false
    }


    return true
  }
};
</script>

<style scoped lang="less">
.new_content {
  width: 100%;
  height: 95%;
  border-top: 1px solid #3c3e47;
  display: flex;
  align-items: center;

  .new_left {
    width: calc(360px + 30px);
    height: 100%;
    border-right: 1px solid #3c3e47;
    padding: 15px 0;
    background-color: #202b2c;
    border-top: 1px solid #3c3e47;
    overflow: hidden;
    overflow-y: auto;

    .new_item {
      width: 100%;
      padding: 0 15px;
      margin-bottom: 15px;
      cursor: pointer;

      .img_title {
        width: 100%;
        height: 200px;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .item_bottom {
        width: 100%;

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          height: 56px;
          font-weight: 700;
          font-size: 20px;
          color: #fff;
          margin-top: 15px;
        }

        .time {
          margin-top: 5px;
          color: #fff;
          opacity: 0.7;
          display: inline-block;
        }
      }
    }
  }

  .new_right {
    width: 100%;
    height: 100%;
    flex: 1;
    background-color: #202b2c;
    padding-top: 40px;
    overflow: hidden;
    overflow-y: auto;
    border-top: 1px solid #3c3e47;

    .add_width {
      width: 80%;
      margin: 0 auto;

      .header_top {
        width: 100%;
        display: flex;
        align-items: center;
        padding-bottom: 25px;

        .user_img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }

        .name {
          font-weight: 700;
          font-size: 15px;
          color: #fff;
          padding: 0 10px;
        }

        .time {
          font-weight: 700;
          font-size: 15px;
          color: #fff;
          opacity: 0.6;
        }
      }

      .article_cover {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 15px;

        .title_img {
          width: 100%;
          height: 270px;
          border-radius: 5px;
          padding-bottom: 25px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            object-fit: cover;
          }
        }

        .article_text {
          line-height: 1.8;
          font-size: 18px;
          color: #fff;
          opacity: 0.7;
        }

        .praise {
          width: 100%;
          height: 75px;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon-dianzan {
            font-size: 20px;
            cursor: pointer;
            opacity: 0.6;
            color: #fff;
          }
        }

        .text_desc {
          width: 80%;
          margin: 0 auto;
          border-radius: 10px;
          border: 1px solid #3c3e47;
          color: #fff;
          opacity: 0.5;
          margin-bottom: 15px;
          font-size: 14px;
          padding: 10px;
          background-color: #202b2c;
        }
      }
    }
  }
}
</style>
